{% if account_order_detail.order_number %}
  {% template 'account_orderdetail' ,{ account_order_detail : account_order_detail, isTemplate : true } %}
{% else %}

<style>
  .layer-order{
   background:#fff;
   position:relative;
   width: 800px;
  }
  .layer-order-close{ 
    display: inherit;
  }
  .layer-order-header{
    padding:20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .layer-order-header span{
    font-weight: bold;
    font-size: 16px;
    color: #000;

  }
  .order-list-header{
    background: #DDDDDD;
    height: 50px;
    align-items: center;
    padding: 0 30px;
    color: #000;
    box-sizing: border-box;
  }
  .order-list-box{
    width: 100%;
    box-sizing: border-box;
  }

  .order-list-item {
    border-bottom:1px dashed #ddd;
  }
  .order-list-item:last-child{
    border-bottom:none;
  }



 
  .oem-drawer-popup {
    position: fixed;
    z-index: 50102;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: none;
  }
 

  .oem-drawer-popup-cover{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 50200;

  }
  .oem-drawer-popup-warp{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.6);
    z-index: 50300;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transition: all .35s;
  }

  .oem-drawer-popup-show{
    display: block;
  }
  .oem-drawer-popup-show .oem-drawer-popup-open{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }

  .order-btn{
    margin-top: 0;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
  }
  #order-content-scroll{
    max-height: 400px;
   overflow-y: scroll;
   padding: 0 30px;
    box-sizing: border-box;
  }
  .order-loading{border-color:#000; border-bottom-color: transparent;    position: static;margin:10px auto;display: block;}
  .order-list-item-move{
    gap:20px;
    flex-wrap: wrap;
    padding: 20px 0;
  }
 
  .order-cell{
    width: 47%;
    flex-shrink: 0;
  }
  .order-cell .order-cell-label{
    font-weight: bold;
    color: #000;
  }
  .order-cell .order-cell-value{
    font-weight: bold;
    margin-top: 8px;
    color: #666666;
  }



  .trackingorder-cell{

  }
  .trackingorder-cell-input{
    flex: 1;
  }
  .trackingorder-cell-input .tip{
    display: none;
  }
  .trackingorder-cell-input input{
    border: 1px solid var(--main_button_bg);
    background: transparent;
    height: 48px;
    transition: none;
  }
  .trackingorder-cell .main_btn{
    width: 148px;
    margin-top: 0;
    margin-left: 15px;
    align-self: self-start;
  }
  .mo-form-item-value-error input{
    border: 1px solid red;
  }
  .mo-form-item-value-error .tip{
    color: red;
    margin-top: 2px;
    display: block;
  }

  @media screen and (max-width: 800px) {
    .layer-order{
       width: 100vw;
       box-sizing: border-box;
    }
    .oem-drawer-popup-warp{
      top:auto;
      bottom: 0;
      left: 0;
      opacity: 1;
      transform: translate(0,100%)  scale(1);
    }
    .oem-drawer-popup-show .oem-drawer-popup-open{
      transform: translate(0,0) scale(1);
    }
    .order-list-header{
      display: none;
    }
    .layer-order-header{
      padding: 20px;
      border-bottom: 1px solid #ddd;
    }
    #order-content-scroll{
      padding: 0 20px;
    }
    .trackingorder-cell{
      flex-direction: column;
      gap: 15px;
    }
    .trackingorder-cell .main_btn{
      width: 100%;
      margin-left: 0;
    }
  }
</style>

<div class="customer_trackingorder_default" id="customer_trackingorder">
  <div class="tracking_order_form">
    <div class="container_wrapper">
      <h1 class="title">{{lang.order.tracking_order}}</h1>
      {% if track_order_config == 1 %}
       

        <form  class="trackingorder-cell">
          <div class="trackingorder-cell-input" id="trackingorder-number">
            <div class="mo-form-item-value">
              <input id="contact" value="{{trackingorder.order_number}}" class="mo-form-input"  name="order_number" placeholder="{{lang.checkout.order_number}}" type="text">
            </div>
            <div class="tip"></div>
          </div>
          
          <div  class="main_btn"  id="submit">
            <input type="button" style="cursor: pointer;background-color: transparent;color: #fff;"  value="{{lang.general.submit|upcase}}">
          </div>
        </form> 
      {% endif %}
      
      {% if track_order_config == 2 %}
        <form  class="trackingorder-cell">
          <!-- <div class="tracking_order_txt">
            <input  value="{{trackingorder.email}}" placeholder="{{lang.account.form.email}}" type="text" name="email">
          </div> -->
          <div class="trackingorder-cell-input" id="trackingorder-email">
            <div class="mo-form-item-value">
              <input id="contact" value="{{trackingorder.email}}" class="mo-form-input"  name="email" placeholder="{{lang.account.form.email}}" type="text">
              <!-- <label for="contact" class="field_label">{{lang.account.form.email}}</label> -->
            </div>
            <div class="tip"></div>
          </div>
          
          <div  class="main_btn"  id="submit">
            <input type="button" style="cursor: pointer;background-color: transparent;color: #fff;"  value="{{lang.general.submit|upcase}}">
          </div>
        </form> 
      {% endif %}

      {% if track_order_config == 3 %}
        <form class='df-flex-col df-gap-4'  style='max-width:520px' >
          <div class="trackingorder-cell-input" id="trackingorder-email">
            <div class="mo-form-item-value">
              <input id="contact" value="{{trackingorder.email}}" class="mo-form-input"  name="email" placeholder="{{lang.account.form.email}}" type="text">
            </div>
            <div class="tip"></div>
          </div>
          <div class="trackingorder-cell-input" id="trackingorder-number">
            <div class="mo-form-item-value">
              <input id="contact" value="{{trackingorder.order_number}}" class="mo-form-input"  name="order_number" placeholder="{{lang.checkout.order_number}}" type="text">
            </div>
            <div class="tip"></div>
          </div>
          <div  class="tracking_order_btn"  id="submit" style="cursor: pointer;margin-top: 0 !important;width:100%;" >
            <input type="button" style="cursor: pointer;background-color: transparent;color: #fff;"  value="{{lang.general.submit|upcase}}">
          </div>
        </form>
      {% endif %}

     
    </div>

    
  </div>
</div>
<!--  oem-drawer-popup-show -->
<div class="oem-drawer-popup">
  <div class="oem-drawer-popup-cover drawer-close"></div>
  <div class="oem-drawer-popup-warp">
    <div class="layer-order">
      <div class="layer-order-header">
        <span>{{lang.order.tracking_order}}</span>
        <a href="javascript:;" class="drawer-close layer-order-close"><svg t="1633405599567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="20" height="20"><path d="M453.44 512L161.472 220.032a41.408 41.408 0 0 1 58.56-58.56L512 453.44 803.968 161.472a41.408 41.408 0 0 1 58.56 58.56L570.56 512l291.968 291.968a41.408 41.408 0 0 1-58.56 58.56L512 570.56 220.032 862.528a41.408 41.408 0 0 1-58.56-58.56L453.44 512z" p-id="1985"></path></svg></a>
      </div>
      <div class="order-list-box">
        <div class="df-flex order-list-header">
          <div class="df-flex-1">{{lang.account.orders.order_number}}</div>
          <div class="df-w-1/5 ">{{lang.account.orders.order_status}}</div>
          <div class="df-w-1/5 ">{{lang.account.orders.total_price}}</div>
          <div class="df-w-1/5 ">{{lang.account.orders.actions | default:"Actions"}}</div>
        </div>
        <div id="order-content-scroll">

          <div id="order-content"></div>
          <div id="order-more"><div class="mo-loading order-loading"></div></div>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/x-template" id="order-list-temp">
  {% raw %}
  {% for item in list %}
    <div class="df-py-3 order-list-item df-hidden md:df-flex">
      <div class="df-flex-1">
        <div style='font-weight: bold;'>{{item.order_number}}</div>
        <div style="color:#999;" data-date="{{item.created_at}}" class="format-date" data-format="YYYY-mm-dd">{{item.created_at}}</div>  
      </div>
      <div class="df-w-1/5 df-flex df-items-center">
        <span class="mo-tag">{{item.financial_status_name | upcase}}</span>
      </div>
      <div class="df-w-1/5 df-flex df-items-center">{{item.total_price | money:item.currency,true,false}}</div>
      <div class="df-w-1/5 df-flex df-items-center">
        <a class="secondary_btn order-btn" href="/account/trackingorder?order_number={{item.order_number}}&customer_email={{customer_email}}">{{lang.account.orders.view}}</a>
      </div>
    </div>
  {% endfor %}
  {% for item in list %}
    <a class="df-py-3 order-list-item  order-list-item-move df-flex md:df-hidden"  href="/account/trackingorder?order_number={{item.order_number}}&customer_email={{customer_email}}">
      <div class='order-cell'>
        <div class="order-cell-label">{{lang.account.orders.order_number}}</div>
        <div class="order-cell-value">{{item.order_number}}</div>
      </div>
      <div class='order-cell'>
        <div class="order-cell-label">{{lang.account.orders.order_status}}</div>
        <div class="order-cell-value"><span class="mo-tag">{{item.financial_status_name | upcase}}</span></div>
      </div>
      <div class='order-cell'>
        <div class="order-cell-label">{{lang.account.orders.date}}</div>
        <div class="order-cell-value format-date" data-date="{{item.created_at}}"  data-format="YYYY-mm-dd">{{item.created_at}}</div>
      </div>
      <div class='order-cell'>
        <div class="order-cell-label">{{lang.account.orders.total_price}}</div>
        <div class="order-cell-value">{{item.total_price | money:item.currency,true,false}}</div>
      </div>
    </a>
  {% endfor %}
  {% endraw %}
  
</script>

<script>
  $(function(){
    var track_order_config = "{{track_order_config}}";
    var page = 1;
    var isAll = false;
  

    var isRequset = false;
    function getTrackorderquery(callback){
      if(isRequset || isAll){
        return false
      }
      isRequset = true
      moi.ajax({
          url: '/account/trackorderquery',
          type: "get",
          data: {
            order_number:$('input[name="order_number"]').val() || "",
            email:$('input[name="email"]').val() || "",
            page:page,
            pagesize:10,
          },
          complete:function(){
            isRequset = false;
          },
          success: function (res) {
            callback && callback();
            if (res.code !== 0) {
              return moi.alert({title:res.msg})
            }
            if(track_order_config == 1|| track_order_config == 3){
                if(res.data.customer_email){

                  location.href = '/account/trackingorder?order_number='+res.data.order_number+'&customer_email='+res.data.customer_email;
                }else{
                  location.href = '/account/trackingorder?order_number='+res.data.order_number;

                }
                return
            }
            
            if(res.data.user_list.list && res.data.user_list.list.length){
              res.data.user_list.list.map((item) => {
                  item.created_at = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
                  return item;
							})
              engine.parseAndRender($("#order-list-temp").html(), {
                lang: lang,
                customer_email:res.data.customer_email,
                list: res.data.user_list.list
              }).then(function (html) {
                $("#order-content").append(html);
                $(".oem-drawer-popup").addClass("oem-drawer-popup-show");
                setTimeout(function () {
                  $(".oem-drawer-popup").find(".oem-drawer-popup-warp").addClass("oem-drawer-popup-open");
                }, 100);
              })
              
              if(page * 10 >= res.data.user_list.tatol){
                isAll = true;
                $("#order-more").hide();
              }

            }else{
              return moi.alert(lang.general.not_found)
            }
          }
      })
    }


    $(".drawer-close").click(function(){
      $(".oem-drawer-popup").find(".oem-drawer-popup-warp").removeClass("oem-drawer-popup-open");
      setTimeout(function () {
        $(".oem-drawer-popup").removeClass("oem-drawer-popup-show");
      }, 350);
    })
    function checkEmail(value) {
        return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value)
    }

    function showError(container,msg){
      $(container).addClass("mo-form-item-value-error");
      $(container).find(".tip").html(msg)
    }
    $("input").focus(function(){
      $(this).parents(".trackingorder-cell-input").removeClass("mo-form-item-value-error")
    })
    $("#submit").click(function(){
      var emailValue = $('input[name="email"]').val()
      if(track_order_config == 2|| track_order_config == 3){
        if (!emailValue) {
          showError("#trackingorder-email",lang.account.ruls.email)
          return false;
        }
        if(!checkEmail(emailValue)){
          showError("#trackingorder-email",lang.account.orders.enter_valid_email)
          return false
        }
      }
      
      var searchValue = $('input[name="order_number"]').val()
      if(track_order_config == 1 || track_order_config == 3){
        if (!searchValue) {
          showError("#trackingorder-number",lang.order.order_invalid_tip)
          return false
        }
      }

  
      $("#order-content").html("");
      isAll = false;
      page = 1;
      $("#order-more").show();
      moi.appendLoading({container:"#submit",theme:'white',size:26})
      getTrackorderquery(function(){
        moi.removeLoading("#submit")
      })
    })
    var sc = $("#order-content-scroll");
    sc.on("scroll",function(e){
        var st = sc.scrollTop();
        var h  = sc.height();
        var sh = sc.prop('scrollHeight');
        if ( st >= sh - h - 20 && !isRequset ) {
          page = page + 1;
          getTrackorderquery()
        }
    });
    // h  = sc.height(),
    // sh = sc.prop('scrollHeight');
    // $("#order-content").scroll(function(){

    // })
  })
  // function trackOrderSearch() {
  //   const searchValue = $('.search_value').val()
  //   if (!searchValue) {
  //     moi.tooltip({
  //       placement: "top",
  //       el: $('.search_value'),
  //       timer: 1000,
  //       space: 0,
  //       content: "{{ lang.order.order_invalid_tip }}"
  //     })
  //     return false;
  //   }
  //   return true;
  // }
</script>
{% endif %}
